<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<h1>员工管理系统</h1>
			<div v-if="isAdd">
				<input type="text" v-model="name" placeholder="员工姓名"/>
				<input type="button" value="添加" @click="add()"/>
				<a href="javascript:void(0)" @click="hide()">隐藏添加组件</a>
			</div>
			<div v-else>
				<a href="javascript:void(0)" @click="show()">显示添加组件</a>
			</div>
			<table border="1">
				<caption>员工列表</caption>
				<tr><th>编号</th><th>姓名</th><th v-if="isAdd">操作</th></tr>
				<tr v-for="(name,i) in arr">
					<td>{{i+1}}</td><td>{{name}}</td>
					<td v-if="isAdd"><a href="javascript:void(0)" @click="del(i)">删除</a></td>
				</tr>
			</table>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script>
		let v=new Vue({
			el:"body>div",
			data:{
				isAdd:false,
				arr:["悟空","八戒","沙僧"],
				name:""
			},
			methods:{
				add(){
					v.arr.push(v.name);
				},
				del(i){
					v.arr.splice(i,1);
				},
				hide(){
					v.isAdd=false;
				},
				show(){
					v.isAdd=true;
				}
			}
		});
	</script>
</html>
